<template>
	<view class="page">
		<scroll-view class="scroll-view" scroll-y scroll-with-animation 
		 :scroll-top="top" @refresherpulling="refreshList">
			<view style="padding: 30rpx 30rpx 240rpx;">
				<view class="message" :class="[item.senderId==userid?'self':'friend']" v-for="(item,index) in list" :key="index">
					<image :src="item.senderImages" v-if="item.senderId!==userid" class="avatar" mode="widthFix"></image>
					<!-- <view class="content" v-if="item.messageType === 'image'">
						<image :src="item.content" mode="widthFix"></image>
					</view> -->
					<view  class="content">
						{{ item.message }}
						<text class="time">{{item.createTime | formatDate('YYYY-MM-DD HH:mm:ss')}}</text>
					</view>
					<image :src="item.senderImages" v-if="item.senderId==userid" class="avatar" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<view class="tool">
			<input type="text" v-model="content" class="input"  />
			<view  @click="sendmsg(content)">发送</view>
 		</view>
		<view id="last-msg-item" style="height: 1px;"></view>
	</view>
</template>

<script>
	import { socket } from "@/mixins/socket.js"
	import {messagePageAPI,createdMsgAPI,userInfoAPI} from "@/api/user.js"
	export default {
		// mixins: [socket],
		data() {
			return {
				pageNo:1,
				isRefresh:false,
				pageSize:100,
				total:"0",
				content: '',
				list: [],
				top: 0,
				recipient:{
					recipientId:"",
					recipientName:"",
					recipientImages:""
				},
				info:{},
				userid:uni.getStorageSync('userId'),
				_friendAvatar:'https://jiejinda.oss-cn-beijing.aliyuncs.com/d66c27ff806a7c51e56bbd2b402bcdc2e2b8244fbca7481014a0cbb474b1d78f.png'
			};
		},
		onLoad(options) {
			this.recipient=options
			uni.setNavigationBarTitle({
				title: options.recipientName
			})
			this.getmessagelist()
			 
		},
		created() {
			this.getuser()
		},
		methods: {
			refreshList(){
				// if(this.pageNo * this.pageSize <= parseInt(this.total)){
				// 	uni.showLoading({
				// 		title:'加载中...'
				// 	})
				// 	this.pageNo++ 
				// 	this.getmessagelist() 
					 
				// }else{
				// 	uni.showToast({
				// 		title:"暂无更多聊天记录", 
				// 		icon:"none"
				// 	})
				// }
				console.log(1111)
			},
			getuser() {
				userInfoAPI().then(res => {
					this.info = res
				})
			},
			getmessagelist(){
				messagePageAPI({
				   "pageNo":this.pageNo,
				   "pageSize": this.pageSize,
				   "type": 0,
				   "recipientId": this.recipient.recipientId
				}).then(res=>{
					this.list= res.list 
					this.total=res.total
				})
			},
			sendmsg(){
				createdMsgAPI({
				  "senderName": this.info.nickname,
				  "senderImages": this.info.avatar,
				  "senderId":  this.userid,
				   "messageContent": this.content,
				  "messageType": "member-message",
				  "type": 0,
				  ...this.recipient
				}).then(res=>{
					this.content=''
					this.getmessagelist()
				})
			},
		 
			scrollToBottom() {
				this.top = this.list.length * 1000
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background: #eee;
		box-sizing: border-box;
	}
	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 35rpx;
		
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}
		.content {
			min-height: 80rpx;
			max-width: 60vw;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;
			image {
				width: 200rpx;
			}
		}
		&.self {
			justify-content: flex-end;
			.avatar {
				margin: 0 0 0 30rpx;
			}
			.content {
				position: relative;
				background-color: #E0EEFF;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #E0EEFF;
					right: -28rpx;
					top: 24rpx;
				}
				.time{
					width: 200rpx;
					position: absolute;
					bottom: -25rpx;
					right: 8rpx;
					font-size: 18rpx;
					color: #AAAAAA;
					text-align: right;
				}
			}
		}
		&.friend {
			.content {
				background-color: #F8F8F8;
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #F8F8F8;
					left: -28rpx;
					top: 24rpx;
				}
				.time{
					width: 200rpx;
					position: absolute;
					bottom: -25rpx;
					left: 8rpx;
					font-size: 18rpx;
					color: #AAAAAA;
					 
				}
			}
		}
	}

	.tool {
		position: fixed;
		width: 100%;
		min-height: 120rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 20rpx 24rpx 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;
		.input {
			background: #eee;
			border-radius: 10rpx;
			height: 70rpx;
			margin-right: 30rpx;
			flex: 1;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		>view {
			width: 150rpx;
			line-height: 70rpx;
			text-align: center;
			height: 70rpx;
			background-color: #277EEF;
			border-radius: 10rpx;
			color: #fff;
			border-radius: 40rpx;
		}
	}
</style>
